<template>
    <div>
        <!-- 商品分类列表下拉 -->
        <div
            class="maskWrap"
            v-show="showTypeMask"
        >
            <div
                class="maskBox"
                @click="hideTypeMask"
            ></div>
            <div class="maskContent">
                <ul class="goodTypeList">
                    <li
                        v-for="(item,index) in goodTypeList"
                        :class="{'isActive':currentType === index}"
                        @click="checkType(index)"
                    >
                        <p class="typeName"><img :src="item.iconUrl"></img><span>{{item.itemName}}</span></p>
                        <i class="typeNumber">{{item.goodNumber}}</i>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 商品详情 -->
        <div
            class="goodSelectWrap"
            @scroll.passive="goodInfoScroll($event)"
        >
            <p class="titleWrap">
                <i class="iconfont icon-fork"></i>
                <span>轻甜香草风味奶油冷萃冰咖啡</span>
            </p>
        </div>
        <div
            class="goodListWrap"
            @scroll.passive="handleScroll($event)"
        >
            <navigator></navigator>
            <!-- 固定的菜单 -->
            <div class="fixedWrap">
                <div class="menuWrap">
                    <span
                        @click="showTypeList"
                        class="menuIcon"
                    ></span>
                </div>
            </div>
            <!-- 产品列表 -->
            <template v-for="(item, index) in goodList">
                <div
                    class="menuBox"
                    ref="title"
                    :class="{ 'isFixed' : currentType === index }"
                >
                    <div class="menuWrap">
                        <div class="currentClass">
                            <h2>{{item.goodType}}</h2>
                            <span>{{item.goodData.length}}</span>
                        </div>
                    </div>
                </div>
                <div class="goodListBox">
                    <goodItem
                        :goodList="item"
                    ></goodItem>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import navigator from '../../components/navigator';//顶部导航栏
import goodItem from '../components/goodItem';//商品组件
export default {
    components: {
        navigator,
        goodItem
    },
    data() {
        return {
            offsetTopArr: [],//每个商品类别标题的坐标值
            goodTypeList: [{
                id: 1,
                iconUrl: '/static/icon/itemIcon-01-01.png',
                itemName: '新品',
                goodNumber: 7
            }, {
                id: 2,
                iconUrl: '/static/icon/itemIcon-02.png',
                itemName: '咖啡',
                goodNumber: 6
            }, {
                id: 3,
                iconUrl: '/static/icon/itemIcon-03.png',
                itemName: '星冰',
                goodNumber: 6
            }, {
                id: 4,
                iconUrl: '/static/icon/itemIcon-04.png',
                itemName: '果汁',
                goodNumber: 5
            }, {
                id: 5,
                iconUrl: '/static/icon/itemIcon-05.png',
                itemName: '糕点',
                goodNumber: 4
            }, {
                id: 6,
                iconUrl: '/static/icon/itemIcon-06.png',
                itemName: '饼干',
                goodNumber: 3
            }],
            goodList: [{
                goodType: '新品',
                goodPid: 1,
                goodData: [{
                    goodCid: 1,
                    goodName: '焦糖玛奇朵',
                    goodExplan: '玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩',
                    goodPirce: 32,
                    goodImgSrc: '/static/goodImg/good1.jpg'
                }, {
                    goodCid: 2,
                    goodName: '卡布奇洛',
                    goodExplan: '蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good2.jpg'
                }, {
                    goodCid: 3,
                    goodName: '摩卡(Mocha)',
                    goodExplan: '摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的巧克力风味',
                    goodPirce: 39,
                    goodImgSrc: '/static/goodImg/good3.jpg'
                }, {
                    goodCid: 4,
                    goodName: '拿铁(Latte)',
                    goodExplan: '本色的经典咖啡。新鲜萃取的浓缩咖啡中缓缓倒入蒸煮牛奶，覆上轻柔奶泡，简单的香与纯。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good4.jpg'
                }, {
                    goodCid: 5,
                    goodName: '美式咖啡',
                    goodExplan: '简单即是美味，萃取经典浓缩咖啡，以水调和，香气浓郁蔓溢。',
                    goodPirce: 24,
                    goodImgSrc: '/static/goodImg/good5.jpg'
                }]
            }, {
                goodType: '咖啡',
                goodPid: 2,
                goodData: [{
                    goodCid: 1,
                    goodName: '焦糖玛奇朵',
                    goodExplan: '玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩',
                    goodPirce: 32,
                    goodImgSrc: '/static/goodImg/good1.jpg'
                }, {
                    goodCid: 2,
                    goodName: '卡布奇洛',
                    goodExplan: '蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good2.jpg'
                }, {
                    goodCid: 3,
                    goodName: '摩卡(Mocha)',
                    goodExplan: '摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的巧克力风味',
                    goodPirce: 39,
                    goodImgSrc: '/static/goodImg/good3.jpg'
                }]
            }, {
                goodType: '星冰',
                goodPid: 3,
                goodData: [{
                    goodCid: 1,
                    goodName: '焦糖玛奇朵',
                    goodExplan: '玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩',
                    goodPirce: 32,
                    goodImgSrc: '/static/goodImg/good1.jpg'
                }, {
                    goodCid: 2,
                    goodName: '卡布奇洛',
                    goodExplan: '蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good2.jpg'
                }, {
                    goodCid: 3,
                    goodName: '摩卡(Mocha)',
                    goodExplan: '摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的巧克力风味',
                    goodPirce: 39,
                    goodImgSrc: '/static/goodImg/good3.jpg'
                }, {
                    goodCid: 4,
                    goodName: '拿铁(Latte)',
                    goodExplan: '本色的经典咖啡。新鲜萃取的浓缩咖啡中缓缓倒入蒸煮牛奶，覆上轻柔奶泡，简单的香与纯。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good4.jpg'
                }, {
                    goodCid: 5,
                    goodName: '美式咖啡',
                    goodExplan: '简单即是美味，萃取经典浓缩咖啡，以水调和，香气浓郁蔓溢。',
                    goodPirce: 24,
                    goodImgSrc: '/static/goodImg/good5.jpg'
                }]
            }, {
                goodType: '果汁',
                goodPid: 4,
                goodData: [{
                    goodCid: 1,
                    goodName: '焦糖玛奇朵',
                    goodExplan: '玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩',
                    goodPirce: 32,
                    goodImgSrc: '/static/goodImg/good1.jpg'
                }, {
                    goodCid: 2,
                    goodName: '卡布奇洛',
                    goodExplan: '蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good2.jpg'
                }, {
                    goodCid: 3,
                    goodName: '摩卡(Mocha)',
                    goodExplan: '摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的巧克力风味',
                    goodPirce: 39,
                    goodImgSrc: '/static/goodImg/good3.jpg'
                }]
            }, {
                goodType: '糕点',
                goodPid: 4,
                goodData: [{
                    goodCid: 1,
                    goodName: '焦糖玛奇朵',
                    goodExplan: '玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩',
                    goodPirce: 32,
                    goodImgSrc: '/static/goodImg/good1.jpg'
                }, {
                    goodCid: 2,
                    goodName: '卡布奇洛',
                    goodExplan: '蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good2.jpg'
                }, {
                    goodCid: 3,
                    goodName: '摩卡(Mocha)',
                    goodExplan: '摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的巧克力风味',
                    goodPirce: 39,
                    goodImgSrc: '/static/goodImg/good3.jpg'
                }]
            }, {
                goodType: '饼干',
                goodPid: 4,
                goodData: [{
                    goodCid: 1,
                    goodName: '焦糖玛奇朵',
                    goodExplan: '玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩',
                    goodPirce: 32,
                    goodImgSrc: '/static/goodImg/good1.jpg'
                }, {
                    goodCid: 2,
                    goodName: '卡布奇洛',
                    goodExplan: '蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。',
                    goodPirce: 28,
                    goodImgSrc: '/static/goodImg/good2.jpg'
                }, {
                    goodCid: 3,
                    goodName: '摩卡(Mocha)',
                    goodExplan: '摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的巧克力风味',
                    goodPirce: 39,
                    goodImgSrc: '/static/goodImg/good3.jpg'
                }]
            }],
            currentType: 0,//当前高亮的产品类别
            showTypeMask: false
        }
    },
    methods: {
        // 显示商品类别列表
        showTypeList() {
            this.showTypeMask = true;
            $(".maskContent").slideDown(300)
            $(".maskBox").animate({ opacity: .3 }, 300)
        },
        // 选择商品列表类别
        checkType(index) {
            this.hideTypeMask()
            // 滚动列表到指定位置
            $(".goodListWrap").animate({ "scrollTop": this.offsetTopArr[index] - $(".fixedWrap").height() });
        },
        // 隐藏列表动画
        hideTypeMask() {
            var that = this;
            $(".maskBox").animate({ opacity: 0 }, 300)
            $(".maskContent").slideUp(300, function () {
                that.showTypeMask = false;
            })
        },
        // 监听滚动事件
        handleScroll(event) {
            var scrollTop = event.target.scrollTop//滚动坐标值
            // 判断滚动位置为两个之前就取上一个
            for (let i = 0; i < this.offsetTopArr.length; i++) {
                if (this.offsetTopArr[i] < scrollTop + $(".fixedWrap").height() + 20 && scrollTop + $(".fixedWrap").height() + 20 < this.offsetTopArr[i + 1]) {
                    this.currentType = i
                    return false
                }
            }
        }
    },
    mounted() {
        // 求出每个商品类别标题的文档坐标值，存入数组
        for (var i in this.$refs.title) {
            var offsetTop = this.$refs.title[i].offsetTop
            this.offsetTopArr.push(offsetTop);
        }
        $(".maskContent").slideUp(300)
    }
}
</script>
<style lang="less" scoped>
.goodSelectWrap {
    .titleWrap {
        padding: 0 15px; /*no*/
        position: fixed;
        height: 80px;
        line-height: 80px;
        width: 100%;
        &::after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: rgba(0, 0, 0, 0.3);
            filter: blur(2px); /*no*/
            z-index: -1;
        }
        .icon-fork {
            position: absolute;
            font-size: 40px;
            color: #fff;
        }
        span {
            display: block;
            text-align: center;
            color: #fff;
            font-size: 28px;
        }
    }
}
.maskWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    .maskBox {
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0;
    }
    .maskContent {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 600px;
        background: #fff;
        border-radius: 0 0 20px 20px;
        .goodTypeList {
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 30px;
                height: 100px;
                &.isActive {
                    background: #f7f7f8;
                    .typeName {
                        span {
                            color: #2ea195;
                        }
                    }
                }
                .typeName {
                    display: flex;
                    align-items: center;
                    img {
                        height: 30px; /*no*/
                        width: 60px; /*no*/
                        margin-top: -8px;
                    }
                    span {
                        font-size: 28px;
                        font-weight: bold;
                    }
                }
                .typeNumber {
                    font-style: normal;
                    font-size: 24px;
                }
            }
        }
    }
}
.goodListWrap {
    padding-top: 160px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .fixedWrap {
        background: #fff;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        z-index: 99;
        .menuWrap {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 30px;
            height: 80px;
            border-bottom: 1px solid #f8f8f8; /*no*/
            .menuIcon {
                display: block;
                background: #414141;
                box-sizing: content-box;
                background-clip: content-box;
                width: 24px; /*no*/
                height: 3px; /*no*/
                padding: 5px 0; /*no*/
                border-top: 3px solid #414141; /*no*/
                border-bottom: 3px solid #414141; /*no*/
            }
        }
    }
    .menuBox {
        position: relative;
        // z-index: 99;
        &.isFixed {
            position: fixed;
            top: 80px;
            z-index: 99;
        }
        .menuWrap {
            display: flex;
            align-items: center;
            padding: 0 30px;
            height: 80px;
            .currentClass {
                h2 {
                    font-size: 40px;
                    display: inline-block;
                }
                span {
                    font-size: 24px;
                }
            }
        }
    }
    .goodListBox {
        margin-bottom: 50px;
    }
}
</style>